<script setup>
import { ref, defineProps } from "vue";
const props = defineProps({
  data: {
    Object,
    default: {},
  },
});
// const content = ref([
//   {
//     title: "一、您的基本情况",
//     page: 1,
//     child: [],
//   },
//   {
//     title: "二、您的调剂分析",
//     page: 1,
//     child: [
//       {
//         title: "2.1、一志愿录取最低分、学校复试线、国家线",
//         page: 1,
//       },
//       {
//         title: "2.2、调剂分析结论",
//         page: 1,
//       },
//       {
//         title: "2.3、可调剂专业参考",
//         page: 1,
//       },
//     ],
//   },
//   {
//     title: "三、调剂去向参考",
//     page: 1,
//     child: [
//       {
//         title:
//           "3.1、2024年报考XXXX大学/学院XXXXXX相关专业未被本专业录取的考生最终调剂去向学校",
//         page: 2,
//       },
//       {
//         title:
//           "3.2、2023年报考XXXX大学/学院XXXXXX相关专业未被本专业录取的考生最终调剂去向学校",
//         page: 3,
//       },
//     ],
//   },
//   {
//     title: "四、为您推荐的“保稳冲”调剂院校",
//     page: 5,
//     child: [
//       {
//         title: "4.1、调剂保底院校",
//         page: 5,
//       },
//       {
//         title: "4.2、调剂稳妥院校",
//         page: 5,
//       },
//       {
//         title: "4.3、调剂冲刺院校",
//         page: 6,
//       },
//     ],
//   },
//   {
//     title: "五、推荐调剂院校招生目录及调剂拟录取名单",
//     page: 7,
//     child: [
//       {
//         title: "5.1、调剂保底院校招生目录及调剂拟录取名单",
//         page: 8,
//       },
//       {
//         title: "5.2、调剂稳妥院校招生目录及调剂拟录取名单",
//         page: 9,
//       },
//       {
//         title: "5.3、调剂冲刺院校招生目录及调剂拟录取名单",
//         page: 10,
//       },
//     ],
//   },
//   {
//     title: "六、调剂建议",
//     page: 11,
//     child: [],
//   },
// ]);
</script>
<template>
  <div class="catalogue pageing">
    <div class="catalogue-title">
      <div>目录</div>
    </div>
    <div class="catalogue-content">
      <div class="paragraph" v-for="item in data.catalogueData" :key="item">
        <div class="paragraph-title" v-if="item.child?.length === 0">
          <span class="title-page">
            <span class="title">
              {{ item.title }}
            </span>
            <span class="ellipsis"></span>
          </span>
          <span class="page">{{ item.page }}</span>
        </div>
        <div v-else>
          <div class="paragraph-title">
            <span class="title-page">
              <span class="title">
                {{ item.title }}
              </span>
              <span class="ellipsis"></span>
            </span>
            <span class="page">{{ item.page }}</span>
          </div>
          <div class="sub-paragraph" v-for="subItem in item?.child" :key="subItem">
            <div class="paragraph-title">
              <span class="title-page">
                <span class="title">
                  {{ subItem.title }}
                </span>
                <span class="ellipsis"></span>
              </span>
              <span class="page">{{ subItem.page }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.catalogue {
  .catalogue-title {
    background-image: url("../../img/foreword_bg.png");
    background-repeat: no-repeat; /* 不重复背景图片 */
    background-size: 100% 100%; /* 背景图片覆盖整个容器 */
    background-position: center; /* 背景图片居中显示 */
    text-align: center;
    div {
      font-size: 40px;
      color: #fff;
    }
  }

  .catalogue-content {
    padding: 20px;
    .paragraph {
      margin-bottom: 16px;

      .paragraph-title {
        display: flex;
        width: 100%;

        .title-page {
          flex: 1;
          display: flex;
          align-items: center;
          .ellipsis {
            border-bottom: 2px dotted #000;
            margin: 0 16px;
            flex: 1;
          }
        }
      }

      .sub-paragraph {
        .title {
          text-indent: 2em;
        }
        margin-bottom: 10px;
      }
    }
  }
}
</style>
